<template>
	<!-- VIP弹框 -->
	<view class="share">
		<view :class="{ 'share-box': shareState }"></view>
		<view class="share-item" :class="{ 'share-show': shareState }">
			<view class="Block">
				<view class="b-hezi">
					<u--image class="u-radio" width="250" mode="widthFix" :src="oss + '/mine/esd.png'"></u--image>
					<view class="u-abso m-abbr m-c-w u-font-40">团员</view>
					<view class="m-eard">
						<view class="u-font-40 m-font-w">恭喜您</view>
						<view class="u-font-33 m-font-s">解锁团员勋章荣耀</view>
						<view class="u-font-24 m-code">可获得更高等级的服务</view>
					</view>
					<view class="v-m-t u-flex u-flex-center" @click="handShare"><u--image width="40" mode="widthFix" :src="oss + '/mine/quxiao.png'"></u--image></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'tuanyuan',
	data() {
		return {
			shareState: false
		};
	},
	created() {},
	methods: {
		// 显示分享
		handleShow() {
			uni.hideTabBar(); //隐藏tab
			this.shareState = true;
		},
		// 隐藏分享
		handShare() {
			setTimeout(() => {
				uni.showTabBar(); //显示tab
			}, 300);
			this.shareState = false;
		}
	}
};
</script>

<style lang="scss" scoped>
/* #ifndef APP-NVUE */
/* 选中 */
.share-box {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0rpx;
	left: 0rpx;
	bottom: 0rpx;
	right: 0rpx;
	background-color: rgba(0, 0, 0, 0.6);
	transition: 0.3s;
	z-index: 999;
}

/* // 进入分享动画 */
.share-show {
	transition: all 0.3s ease;
	transform: translateY(0%) !important;
}

/* // 离开分享动画 */
.share-item {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100% !important;
	height: auto;
	transition: all 0.3s ease;
	transform: translateY(100%);
	z-index: 1999;
	border-top-left-radius: 45rpx;
	border-top-right-radius: 45rpx;
}

.Block {
	height: 1000rpx;
	border-top-left-radius: 45rpx;
	border-top-right-radius: 45rpx;

	.b-hezi {
		width: 500rpx;
		height: auto;
		margin: auto;
	}

	.m-abbr {
		top: 30.5%;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.m-eard {
		width: 320rpx;
		height: auto;
		background-color: #fff;
		margin: -70rpx auto;
		border-radius: 20rpx;
	}

	.m-font-w {
		color: #69a4fe;
		font-weight: bold;
		text-align: center;
		padding-top: 70rpx;
	}

	.m-font-s {
		color: #69a4fe;
		font-weight: bold;
		text-align: center;
		padding-top: 20rpx;
	}

	.m-code {
		color: #7cb0ff;
		text-align: center;
		padding-top: 20rpx;
		padding-bottom: 30rpx;
	}

	.v-m-t {
		margin-top: 150rpx;
	}
}

/*#endif*/
</style>
